<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>time</title>
		<!-- 179000611王少琦 -->
		<style type="text/css">
			.time1{
				background: url(images/cald.png);
				width: 150px;
				height: 138px;
			}
			#week{
				margin-left: 36px;
				color: white;
				font-size: 25px;
				font-weight: 500;
			}
			#day{
				width: 50px;
				text-align: center;
				margin-left: 37px;
				color: black;
				font-size: 60px;
				font-weight: 800;
			}
			.time2{
				background: url(images/clock.png);
				width: 240px;
				height: 146px;
			}
			#time{
				float: left;
				margin-top: 40px;
				text-align: center;
				margin-left: 37px;
				color: white;
				font-size: 40px;
				font-weight: 800;
			}
		</style>
	</head>
	<body>
		<div>
			<div class="time1">
				<span id="week"></span>
				<span id="day"></span>
			</div>
			<div class="time2">
				<span id="time"></span>
			</div>
		</div>
		<script type="text/javascript">
			function formatNowTime(){
				let date = new Date();
				let timeStr = "";
				let h = date.getHours();
				let m = date.getMinutes();
				let s = date.getSeconds();
				if(h<10){
					timeStr+="0"+h+":";
				}else{
					timeStr+=h+":";
				}
				if(m<10){
					timeStr+="0"+m+":";
				}else{
					timeStr+=m+":";
				}
				if(s<10){
					timeStr+="0"+s;
				}else{
					timeStr+=s;
				}
				return timeStr;
			}
			function formatWeek(){
				let date = new Date();
				let week = date.getDay();
				let weekStr = "";
				switch(week){
					case 1:
						weekStr = "星期一";
						break;
					case 2:
						weekStr = "星期二";
						break;
					case 3:
						weekStr = "星期三";
						break;
					case 4:
						weekStr = "星期四";
						break;
					case 5:
						weekStr = "星期五";
						break;
					case 6:
						weekStr = "星期六";
						break;
					case 7:
						weekStr = "星期天";
						break;
				}
				return weekStr;
			}
			
			function formatDate(){
				let date = new Date();
				if(date.getDate()<10){
					return " "+date.getDate();
				}else{
					return ""+date.getDate();
				}
			}
			
			function setTime(){
				console.log("555");
				document.querySelector("#week").innerHTML = formatWeek();
				document.querySelector("#day").innerHTML = formatDate();
				document.querySelector("#time").innerHTML = formatNowTime();
			}
			
			setInterval("setTime()",500);
		</script>
	</body>
</html>
